<template>
	<!-- 刷题 -->
	<view class="content" :style="{ '--font-size-scale': fontSizeScale}">
		<nav-bar :leftText="DEPTBYKEMULIST[question[0]]?.s[question[1]]?.s[question[2]]?.n || ''" leftType="3" bgColor="#FFE8CA"></nav-bar>
		<view class="serial-number" :class="{'patternOpen': patternShow}">
			<view></view>
			<view v-if="!exReadonly" class="right">
				<view class="open" :class="{'on': exercisePattern==3}" @click="exercisePatternClick"><view class="iconfont icon-yanjing_xianshi_o"></view>背题</view>
				<view @tap="checkMore" @close="moreClose" class="more"><view class="iconfont icon-sandian"></view></view>
			</view>
		</view>
		
		<view class="exercise-info" @touchstart="touchStart" @touchend="touchEnd">
			<view class="info-type">
				<view v-if="$common.isEmpty(SUBJECTBYDEPT?.[selection]?.content?.trim())">单选题-A1/A2型题</view>
				<view v-else>单选题-A3/A4型题</view>
				<view class="r">{{selection+1}}<view class="sum">/{{SUBJECTBYDEPT?.length}}</view></view>
			</view>
			<view v-if="!$common.isEmpty(SUBJECTBYDEPT?.[selection]?.content?.trim())" class="titleA3A4"><text class="label">共用题干：</text>{{SUBJECTBYDEPT?.[selection]?.content}}</view>
			<view class="title">
				<view class="num">{{selection+1}}.</view>
				<view class="text">{{SUBJECTBYDEPT?.[selection]?.title}}</view>
			</view>
			<view class="answer-list">
				<!-- right 正确答案 	wrong 错误选项 -->
				
				<template v-for="(item,index) in ['a','b','c','d','e','f','g']">
					<view v-if="SUBJECTBYDEPT?.[selection]?.[item]" class="item" :key="selection+'-'+index"
					 :class="getItemClass(item,index)" @click="choose(item,index)">
						<view class="select">
							<view v-if="isShowErr(item,index)" class="iconfont icon-cuo"></view>
							<view v-else-if="isShowChoose(item,index)" class="iconfont icon-dui"></view>
						</view>
						<view class="text">{{item.toUpperCase()}}.{{SUBJECTBYDEPT?.[selection]?.[item]}}</view>
					</view>
				</template>
			</view>
			
			<view class="center-btn" v-if="exercisePattern==1 && !exReadonly">
				<button v-if="!exerciseList[selection]" class="btn" :disabled="lxtypeChoose==-1" @click="choose(lxtypeChooseItem,lxtypeChoose,true)">确定</button>
				<button v-else class="btn" @click="touchCallback()">下一题</button>
			</view>
			
			<view class="ex-edit">
				<view class="btn" @click="commentCreate('2')">题目纠错</view>
			</view>
			
			<view class="statistics" v-if="(exercisePattern===1 && !!exerciseList[selection]) || (exercisePattern==2 && exerciseList[selection] && exerciseList[selection]!=SUBJECTBYDEPT?.[selection]?.value) || (exercisePattern==3)">
				<view class="left">统计：</view>
				<view class="right">
					本人作答<view class="sign">{{subjectCommentStatusList[selection]?.doCount}}次</view>，对<view class="sign">{{subjectCommentStatusList[selection]?.doRightCount}}次</view>，正确率
					<view class="sign">{{subjectCommentStatusList[selection]?.rightRate}}%</view>，本题全部考生作答{{subjectCommentStatusList[selection]?.allDoCount}}次，对{{subjectCommentStatusList[selection]?.allDoRightCount}}次，正确率{{subjectCommentStatusList[selection]?.allRightRate}}%.
				</view>
			</view>
		</view>
		
		
		<view class="analysis" v-if="(exercisePattern===1 && !!exerciseList[selection]) || (exercisePattern==2 && exerciseList[selection] && exerciseList[selection]!=SUBJECTBYDEPT?.[selection]?.value) || (exercisePattern==3) || exReadonly">
			<view class="list">
				<view class="item">
					<view class="title">
						<view class="iconfont icon-leida-faxian_o"></view>
						<view class="ctext">陶老师考查频率</view>
					</view>
					<view class="text">
						<view class="bold">{{SUBJECTBYDEPT?.[selection]?.frequency}}&emsp;本题考点自11年以来共考{{SUBJECTBYDEPT?.[selection]?.frequencyNum}}次</view>
					</view>
				</view>
				<!-- <view class="item">
					<view class="title">
						<view class="iconfont icon-ditu_dingwei_o"></view>
						<view class="text">陶老师考点还原</view>
					</view>
					<view class="text">
						(第一章第一节护理程序)(考试指导P9)(2)客观资料:是护士经观察、体检、借助其他仪器检查或实验室检查等所获得的病人的健康资料”
						<view class="bold">(C对ABDE错)</view>
					</view>
				</view> -->
				<view class="item">
					<view class="title">
						<view class="iconfont icon-liangdianlingganbeifen"></view>
						<view class="text">陶老师考点解析</view>
					</view>
					<view class="text">
						<text>{{SUBJECTBYDEPT?.[selection]?.info}}</text>
					</view>
				</view>
			</view>
			<view class="remark">内容持续校对升级，最近更新时间:{{SUBJECTBYDEPT?.[selection]?.createdAt}}</view>
		</view>
		
		<view class="comment">
			<view class="item" v-for="(item,index) in commentsList" :key="index">
				<view class="user-info">
					<view class="user-img">
						<image class="img" src="../../static/image/svg/2331.svg" mode="aspectFit"></image>
					</view>
					<view class="name-date">
						<view class="name">陶老师考生{{item.uid}}</view>
						<view class="date">{{$common.dateFormat(item.createdAt)}}</view>
					</view>
				</view>
				<view class="text">{{item.content}}</view>
				<view class="approval">
					<view class="ex" :class="{'on': item.vote1}" @click="commentClick(item,index,'1')">赞同({{item.agree || 0}})</view>
					<view class="dis" :class="{'on': item.vote2}" @click="commentClick(item,index,'2')">反对({{item.oppose || 0}})</view>
				</view>
			</view>
		</view>
		
		<view class="bottom-tab" v-if="!exReadonly">
			<view class="bottom-fixed">
				<view class="left" @click="commentCreate('1')">
					<view class="l">
						<view class="iconfont icon-xiugai"></view>
						写评论
					</view>
					<view class="r">
						<view class="iconfont icon-pinglun"></view>
					</view>
				</view>
				<view class="right">
					<view class="item" :class="{'on': subjectCommentStatusList[selection]?.haveCollect===1}" @click="collectClick">
						<view class="iconfont icon-shoucang"></view>收藏
					</view>
					<view class="item" :class="{'on': subjectCommentStatusList[selection]?.haveComment===1}" @click="commentCreate('3')">
						<view class="iconfont icon-yijianfankui"></view>笔记
					</view>
					<view class="item" @click="goAnswerSheet">
						<view class="iconfont icon-dingdanjihe"></view>答题卡
					</view>
				</view>
			</view>
		</view>
		
		<servicePopup ref="service1" type="2" key="2" :pscrollTop="scrollTop" fixedTop="1140"></servicePopup>
		<!-- <servicePopup @serviceClick="commentCreate('2')" ref="service2" type="3" key="3" fixedTop="440"></servicePopup> -->
		<exercisePopup ref="exercise" :type="type"></exercisePopup>
		<patternPopup ref="pattern" @pattern="pattern"></patternPopup>
		<commentPopup ref="commentPopup" @addSuccess="addSuccess" :selection="selection"></commentPopup>
		
	</view>
</template>

<script>
	import { debounce } from 'lodash';
	import servicePopup from "@/components/servicePopup.vue"
	import exercisePopup from "@/components/exercisePopup.vue"
	import patternPopup from "@/components/patternPopup.vue"
	import commentPopup from "@/components/commentPopup.vue"
	import pageScrollMixin  from "@/mixins/pageScrollMixin.js"
	import {commentsBySubject,addSingleHistory,addHistory,agreeComment,addCollect,deleteCollect,getSubjectCollectAndComment} from '@/api/index.js'
	export default {
		mixins: [pageScrollMixin],
		components: {
			servicePopup,
			exercisePopup,
			patternPopup,
			commentPopup
		},
		data() {
			return {
				patternShow: false,
				selection: 0,
				loading: false,
				page: 1,
				hasMore: true,
				isRecite: false,//背题模式
				startX: 0, //开始x坐标
				startY: 0, //开始y坐标
				threshold: 40, // 设置阈值以便判断滑动方向
				debounceTimeout: null,//定时器
				submitList: [],//单题提交的list，用于防止重复提交
				exerciseTime: 0,//答题用时
				exerciseTimeout: null,//答题定时器
				commentsList: [],//评论列表
				lxtypeChoose: -1,//练习题选中
				lxtypeChooseItem: {},//练习题选中item
				oldExercisePattern: 0,//切换之前的模式
				exReadonly: false,
			}
		},
		watch: {
			exercisePattern(newVal){
				if(newVal==3){
					this.$store.commit('set',['exerciseList',[]]);
					uni.showToast({
						title: '开启背题模式，将显示所有题目答案',
						icon: 'none',
						duration: 2500,
						mask: true,
					})
				}
			},
			'$store.state.sheetIndex': {//定位
			    handler(newVal) {
					console.log(newVal,'---191')
					if(newVal==-1){
						this.restart()
					}else{
						this.selection=newVal
					}
			    },
				deep: true,
				immediate: true,
				
			},
			selection(newVal){
				this.commentsList=[];
				this.page=1;
				this.loading=false;
				this.hasMore=true;
				this.getSubjectCollectAndComment();
			},
		},
		computed: {
			SUBJECTBYDEPT() {
				return this.$store.state.SUBJECTBYDEPT;
			},
			DEPTBYKEMULIST() {
				return this.$store.state.DEPTBYKEMULIST;
			},
			question() {
				return this.$store.state.question;
			},
			fontSizeScale() {
				return this.$store.state.fontSizeScale;
			},
			exerciseList() {//选择的答案
				return this.$store.state.exerciseList;
			},
			patternList() {//做题的模式
				return this.$store.state.patternList;
			},
			subjectCommentStatusList() {//每道题的收藏和笔记状态
				return this.$store.state.subjectCommentStatusList;
			},
			exercisePattern() {//答题模式
				return this.$store.state.exercisePattern;
			},
			isAiExercise() {//是否ai生成的题
				return this.$store.state.isAI;
			},
			type() {//ai生成的题模式 1错题攻克 2章节强化 3每日提升 4万人模拟考
				return this.$store.state.isAIType;
			},
			getKeMuParams() {
				return this.$store.getters.getKeMuParams;
			},
		},
		onReachBottom() {
		    if (this.loading || !this.hasMore) return;
		    console.log('滚动到底部了');
		    this.commentsBySubject();
		},
		onLoad(options) {
			let exReadonly=this.exReadonly=this.$store.state.exReadonly;
			if(exReadonly){//答题页是否只读
				this.$store.commit('set',['exReadonly',false]);
			}
			this.submitList=new Array(this.SUBJECTBYDEPT?.length);
			this.extime();
		},
		mounted() {
			console.log(this.isAiExercise,'---ai---')
			setTimeout(()=>{
				this.getSubjectCollectAndComment();
			},100)
		},
		onReady(){
		},
		methods: {
			exercisePatternClick(){
				if(this.exercisePattern==3){
					this.$store.commit('set',['exercisePattern',-1])
					this.$store.commit('set',['exercisePattern',this.oldExercisePattern])
				}else{
					this.oldExercisePattern=this.exercisePattern;
					this.$store.commit('set',['exercisePattern',3])
				}
			},
			// 评论成功回调
			addSuccess(){
				let collect=this.subjectCommentStatusList[this.selection];
				this.commentsBySubject(1);
				collect.haveComment=1
			},
			// 写评论
			commentCreate(type){
				const item=this.subjectCommentStatusList[this.selection];
				const isComment=item?.haveComment===1;
				const OldVal=item?.commentList?.[item?.commentList?.length-1]?.content;
				this.$refs.commentPopup.openModal(type,false,isComment ? OldVal : '');
			},
			// 收藏
			collectClick: debounce(function(item,index,type){
				let collect=this.subjectCommentStatusList[this.selection];
				const params={
					sid: this.SUBJECTBYDEPT[this.selection].id,
					type: '1'
				}
				if(collect.haveCollect===0){
					collect.haveCollect=1;
					addCollect(params).then(res=>{
						uni.showToast({
							title: '收藏成功',
							icon: 'none'
						})
					})
				}else{
					deleteCollect(params).then(res=>{
						collect.haveCollect=0;
						uni.showToast({
							title: '已取消收藏',
							icon: 'none'
						})
					})
				}
			},500),
			// 评论点赞
			commentClick: debounce(function(item,index,type){
				console.log(item,type,'----225')
				item['vote'+type]=!item['vote'+type];
				if(type=='1'){
					if(item.vote1 && item.vote2){
						item.vote2=false;
						item.oppose-=1;
					}
				}else{
					if(item.vote1 && item.vote2){
						item.vote1=false;
						item.agree=1;
					}
				}
				const agree=Number(item.agree || 0);
				const oppose=Number(item.oppose || 0);
				if(item['vote'+type]){
					type=='1' ? item.agree=agree+1 : item.oppose=oppose+1
				}else{
					type=='1' ? item.agree=agree-1 : item.oppose=oppose-1
				}
				agreeComment({
					id: item.id,
					status: Number(type),
					isErr: true,
				}).then(res=>{
					console.log(res,'---229')
				})
			},500),
			// 做题计时
			extime(){
				this.exerciseTime=0;
				this.exerciseTimeout=setInterval(()=>{
					this.exerciseTime+=1;
					this.exerciseTime>20000 ? clearInterval(this.exerciseTimeout) : '';
				},1000)
			},
			// 重新开始
			restart(){
				this.selection=0;
				this.extime();
				this.submitList=new Array(this.SUBJECTBYDEPT.length);
				this.$store.commit('set',['exerciseList',new Array(this.SUBJECTBYDEPT.length)]);
				this.$store.commit('set',['patternList',new Array(this.SUBJECTBYDEPT.length)]);
				this.$store.commit('set',['subjectCommentStatusList',new Array(this.SUBJECTBYDEPT.length)]);
			},
			// 字体设置/模式选择
			pattern(type){
				console.log(this.exercisePattern,'-----324')
				let value=-1;
				let fontSize=this.fontSizeScale;
				if(type=='1'){//练习模式
					value=1;
					uni.showToast({title: `已开启练习模式`,icon: 'none'});
				}else if(type=='2'){//快速模式
					value=2;
					uni.showToast({title: `已开启快速模式`,icon: 'none'});
				}else if(type=='5'){//快考模式
					value=4;
					uni.showToast({title: `已开启快考模式`,icon: 'none'});
				}else if(type=='3'){//字体增大
					fontSize<1.4 && (fontSize+=0.2)
				}else if(type=='4'){//字体减小
					fontSize>1 && (fontSize-=0.2)
				}
				if(['3','4'].includes(type)){
					this.$store.commit('set',['fontSizeScale',fontSize]);
					uni.setStorageSync('fontSizeScale',fontSize);
				}
				if(['1','2','5'].includes(type)){
					this.$store.commit('set',['exercisePattern',value]);
					uni.setStorageSync('exercisePattern',value);
					this.$refs.pattern.closeModal()
				}
			},
			// 答题：选择答案
			choose(item,index,isNext){
				if(this.exReadonly) return;
				if(this.exercisePattern==1){//练习模式选择答案时，清空当前选项
					let list=[...this.exerciseList];
					list[this.selection]=undefined;
					this.$store.commit('set',['exerciseList',list]);
				}
				console.log(this.exerciseList[this.selection]==this.SUBJECTBYDEPT?.[this.selection]?.value,'---3')
				if(this.exercisePattern==1 && this.lxtypeChoose==-1 && !isNext){
					this.lxtypeChoose=index;
					this.lxtypeChooseItem=item;
					return
				}else if(isNext){
					this.lxtypeChoose=-1;
					this.lxtypeChooseItem={};
				}
				if(this.exercisePattern==3) return;
				this.setExerPattStatus(item);
				if(this.exercisePattern==1 && isNext){
					this.addSingleHistory(item?.toUpperCase());
				}else if(this.exercisePattern!=1){
					this.addSingleHistory(item?.toUpperCase());
				}
			},
			// 答案、模式、状态等数据记录
			setExerPattStatus(item){
				// 做题答案
				let list=[...this.exerciseList];
				list.splice(this.selection,1,item.toUpperCase());
				this.$store.commit('set',['exerciseList',list]);
				
				// 做题的模式
				let list2=[...this.patternList];
				list2.splice(this.selection,1,this.exercisePattern==3 ? 'bt' : this.exercisePattern==1 ? 'lx' : this.exercisePattern==2 ? 'ks' : '');
				this.$store.commit('set',['patternList',list2]);
			},
			// 是否是正确答案
			isRight(item){
				return item.toUpperCase()==this.SUBJECTBYDEPT?.[this.selection]?.value
			},
			// 是否是选中答案
			isChoose(item){
				return item.toUpperCase()==this.exerciseList[this.selection]
			},
			// 是否显示勾选
			isShowChoose(item,index){
				const isShowRight=this.isShowRight(item,index);//是否显示正确项
				const isChoose=this.isChoose(item,index);//是否是选中答案
				return isShowRight || isChoose
			},// 是否显示正确项
			isShowRight(item,index){
				const isRecite=this.exercisePattern==3;//是否背题模式
				const isPractice=this.exercisePattern==1;//是否练习模式
				const isPattern=this.exercisePattern==2;//是否快速模式
				const isChoose=this.isChoose(item,index);//是否是选中答案
				const isSelect=this.exerciseList[this.selection];//是否已选
				const isRight=this.isRight(item);//是否正确答案
				return (isRecite && isRight) || (isPractice && isRight && isSelect) || (isPattern && isRight && isSelect) || (this.exReadonly && isRight)
			},
			// 是否显示错误项
			isShowErr(item,index){
				const isPractice=this.exercisePattern==1;//是否练习模式
				const isPattern=this.exercisePattern==2;//是否快速模式
				const isChoose=this.isChoose(item,index);//是否是选中答案
				const isRight=this.isRight(item);//是否正确答案
				return (isPractice && isChoose && !isRight) || (!isRight && isPattern && isChoose)
			},
			// 获取答案class
			getItemClass(item,index){
				if(this.exercisePattern==1 && this.lxtypeChoose==index){
					return 'deon'
				}else if(this.isShowRight(item,index)){
					return 'right'
				}else if(this.isShowErr(item,index)){
					return 'wrong'
				}else if(this.isShowChoose(item,index)){
					return 'on'
				}else{
					return ''
				}
			},
			// 获取评论
			commentsBySubject(page){
				this.loading = true;
				let size=5;
				commentsBySubject({
					page: page || this.page,
					size,
					sid: this.SUBJECTBYDEPT[this.selection].id,
				}).then(res=>{
					console.log(res,'----216')
					const list=res?.data?.records;
					if (list.length > 0) {
						if(list.length==size){
							this.page++
						}else{
							this.hasMore = false;
						}
						list.map(item=>{
							item.vote1=item.agreeStatus=='1';
							item.vote2=item.agreeStatus=='2';
							return item
						})
						if(page){
							this.commentsList.unshift(list[0])
						}else{
							this.commentsList=this.commentsList.concat(list);
						}
					} else {
						this.hasMore = false;
					}
				}).finally(()=>{
					this.loading = false;
				})
			},
			// 进入答题卡
			goAnswerSheet(){
				uni.navigateBack({
					delta: 1
				})
			},
			checkMore(){
				console.log(this.patternShow,'-----173')
				if(this.patternShow){
					this.patternShow=false;
					this.$refs.pattern.closeModal()
				}else{
					this.patternShow=true;
					this.$refs.pattern.openModal()
				}
			},
			moreClose(){
				this.patternShow=false;
			},
			touchStart(event) {
				this.startX = event.touches[0].clientX;
				this.startY = event.touches[0].clientY;
			},
			// 选择后判斷是否是最後一題
			finallyCallback(item,type){
				if(this.exercisePattern!==3){
					// 保存数据
					this.submitList.splice(this.selection,1,item);
				}
				if(this.selection==this.SUBJECTBYDEPT.length-1){//是否是最后一题
					clearInterval(this.exerciseTimeout);
					this.$store.commit('set',['exerciseTime',this.exerciseTime]);
					this.$store.commit('set',['isError',false]);
					if(this.isAiExercise && this.type=='4'){//Ai题 汇总提交
						return uni.redirectTo({
							url: `/pagesC/statistics/score`
						})
					}else{// 非Ai题弹出 做题完成数据
						this.$refs.exercise.openModal();
					}
				}else{
					if(this.exercisePattern==2){//快速模式
						if(this.exerciseList[this.selection]==this.SUBJECTBYDEPT?.[this.selection]?.value || type){
							this.touchCallback()
						}
					}else if(this.exercisePattern==4){//快考模式
							this.touchCallback()
					}else if(this.exercisePattern!==1 || type){
						this.touchCallback()
					}
				}
			},
			// 切换下一题
			touchCallback(){
				if(this.selection!==this.SUBJECTBYDEPT.length-1){//是否是最后一题
					this.selection++;
					this.lxtypeChoose=-1;
					this.lxtypeChooseItem={};
				}else{
					// 切换保持提示，选择才执行默认操作
					uni.showToast({title: '已经是最后一题咯~',icon: 'none'});
				}
				console.log(this.exerciseList,'---exerciseList')
			},
			touchEnd(event) {
				const touch = event.changedTouches[0]; // 注意 touchend 用 changedTouches
				const deltaX = touch.clientX - this.startX;
				const deltaY = touch.clientY - this.startY;
				if (Math.abs(deltaX) > Math.abs(deltaY)) {
					// 水平滑动
					if (deltaX > this.threshold) {
				        // 右滑动
				        if (this.selection > 0) {
				          this.selection--;
				        } else {
				          uni.showToast({ title: '已经是第一题咯~', icon: 'none' });
				        }
					} else if (deltaX < -this.threshold) {
				        // 左滑动
				        this.finallyCallback({}, true);
					}
				}
			},
			//添加单个做题历史记录
			addSingleHistory(item){
				if(this.submitList[this.selection]==item){
					// 当前题提交过同样的答案，不再提交
					return
				}
				
				let ps=this.selection==this.SUBJECTBYDEPT.length-1;
				let params={
					pid: this.SUBJECTBYDEPT[this.selection].psId || '',//做题历史id
					sid: this.SUBJECTBYDEPT[this.selection].id,
					userValue: item,
					paperCompleteStatus: ps ? '1' : '0',//是否做完该套题：0-否，1-是
					time: this.exerciseTime,
				}
				const list=this.SUBJECTBYDEPT;
				const exl=this.exerciseList;
				const right=list.filter((item,index)=>item.value==exl[index]).length;
				let allPoint=list.length,point=right;
				if(this.type=='4'){//万人模考 需要传分数
					const right=list.filter((item,index)=>item.value==exl[index]).length;
					point=this.$common.scoreFromat(right)
					allPoint=360;
				}
				params.point=point
				params.allPoint=allPoint;
				addSingleHistory(params).then(res=>{
					this.finallyCallback(item);//判斷最后一题
				})
			},
			//添加做题历史记录——AI题
			addHistory(){
				const keyMu=this.$store.getters.getKeMuId;
				const list=this.DEPTBYKEMULIST;
				const sList=this.SUBJECTBYDEPT;
				const key=this.question;
				const item=list[key[0]]?.s[key[1]];
				const keyType={
					'3': { key: '1',name: '每日提升' },
					'2': { key: '2',name: '章节强化' },
					'1': { key: '3',name: '错题攻克' },
					'4': { key: '4',name: '万人模考' },
				}
				const title=keyType[this.type]?.name+this.$common.dateFormat('','1');
				let sub=this.exerciseList.map((item,index)=>{
					if(!!item){
						return {sid: sList[index].id,userValue: item}
					}
					return 
				})
				sub=sub.filter(item=>!!item);
				console.log(sub,'---sub')
				let params={
					// 1-每日提升，2-章节强化，3-错题攻克，4-万人模考
					type: keyType[this.type].key,
					pid2: item?.v,
					pid3: item?.s[key[2]]?.v || '',
					title,
					time: this.exerciseTime,
					paperHistorySubjects: sub
				};
				Object.assign(params,this.getKeMuParams);
				addHistory(params).then(res=>{
					if(this.type=='4'){//万人模拟考试
						return uni.redirectTo({
							url: `/pagesC/statistics/score`
						});
					}else{
						this.$refs.exercise.openModal();
					}
				})
			},
			//查询收藏和笔记状态
			getSubjectCollectAndComment(){
				if(!this.$common.isEmpty(this.subjectCommentStatusList[this.selection])) return;
				if(this.$common.isEmpty(this.SUBJECTBYDEPT))return;
				getSubjectCollectAndComment({
					sid: this.SUBJECTBYDEPT[this.selection]?.id,
				}).then(res=>{
					// 每道题的收藏和笔记状态
					let list=[...this.subjectCommentStatusList];
					list.splice(this.selection,1,res.data);
					this.$store.commit('set',['subjectCommentStatusList',list]);
					console.log(this.subjectCommentStatusList,'----subjectCommentStatusList')
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content{
		min-height: 110vh;
		background-color: #F8F8F8;
	}
	.serial-number{
		justify-content: space-between;
		align-items: center;
		height: 66rpx;
		padding: 0 36rpx;
		font-size: calc(24rpx * var(--font-size-scale));
		color: #444;
		background-color: #F8F8F8;
		&,.open,.right,.more{
			display: flex;
		}
		.open,.more{
			align-items: center;
		}
		.open{
			margin-right: 40rpx;
			font-size: calc(20rpx * var(--font-size-scale));
			color: #666;
			.iconfont{
				margin-right: 10rpx;
				transform: translateY(2rpx);
			}
			&.on{
				.iconfont{
					color: #FCBE6F;
				}
			}
		}
		.right{
			height: 100%;
			.iconfont{
				font-size: calc(42rpx * var(--font-size-scale));
			}
		}
		&.patternOpen{
			position: relative;
			z-index: 112;
		}
	}
	.exercise-info{
		margin-bottom: 28rpx;
		padding: 30rpx 36rpx 46rpx;
		background-color: #fff;
		.info-type{
			margin-bottom: 32rpx;
			justify-content: space-between;
			font-size: calc(26rpx * var(--font-size-scale));
			font-weight: 600;
			color: #222;
			&,.r{
				display: flex;
				align-items: center;
			}
			.r{
				align-items: baseline;
				font-size: calc(32rpx * var(--font-size-scale));
			}
			.sum{
				font-size: calc(20rpx * var(--font-size-scale));
				color: #A3A3A3;
			}
		}
		.title{
			display: flex;
			margin-bottom: 52rpx;
			font-size: calc(30rpx * var(--font-size-scale));
			color: #252525;
			.num{
				flex-shrink: 0;
			}
			.text{
				flex: 1;
				overflow: hidden;
			}
		}
		.answer-list{
			font-size: calc(28rpx * var(--font-size-scale));
			color: #555;
			.item{
				display: flex;
				align-items: center;
				margin-bottom: 40rpx;
				&.on,&.right,&.wrong{
					.iconfont{
						line-height: 40rpx;
						font-size: 40rpx;
						background-color: #fff;
					}
				}
				&.deon{
					.select{
						border-color: #666;
						background-color: #666;
					}
				}
				&.on,&.right{
					.select{
						border-color: #48CA8C;
						background-color: #48CA8C;
					}
					.iconfont{
						color: #48CA8C;
					}
				}
				&.right{
					.text{
						color: #00CB8E;
					}
				}
				&.wrong{
					.select{
						border-color: #FD665F;
						background-color: #FD665F;
					}
					.text{
						color: #FD545F;
					}
					.iconfont{
						color: #FD665F;
					}
				}
			}
			.select{
				position: relative;
				flex-shrink: 0;
				width: 40rpx;
				height: 40rpx;
				overflow: hidden;
				margin-right: 18rpx;
				border-radius: 50%;
				border: 2rpx solid #B2B2B2;
			}
			.text{
				flex: 1;
				overflow: hidden;
				line-height: 44rpx;
			}
		}
		.statistics{
			display: flex;
			margin-top: 84rpx;
			font-size: calc(22rpx * var(--font-size-scale));
			color: #222;
			.left{
				flex-shrink: 0;
			}
			.right{
				flex: 1;
				line-height: 1.35;
			}
			.sign{
				display: inline-block;
				color: #FD7980;
			}
		}
	}
	.analysis{
		padding: 32rpx 36rpx 0;
		margin-bottom: 20rpx;
		background-color: #fff;
		.list{
			padding: 30rpx 26rpx 28rpx;
			border-radius: 16rpx;
			background-color: #FCF9F6;
		}
		.item{
			margin-bottom: 46rpx;
			&:last-child{
				margin-bottom: 0;
			}
		}
		.title{
			display: flex;
			align-items: center;
			padding-bottom: 16rpx;
			margin-bottom: 28rpx;
			font-size: calc(28rpx * var(--font-size-scale));
			color: #BBAA7A;
			border-bottom: 2rpx solid #ECE2D6;
			.iconfont{
				font-size: calc(38rpx * var(--font-size-scale));
			}
			.ctext{
				margin-left: 8rpx;
				font-size: calc(28rpx * var(--font-size-scale));
			}
		}
		.text{
			line-height: 1.93;
			font-size: calc(28rpx * var(--font-size-scale));
		}
		.bold{
			display: inline-block;
			font-weight: 600;
		}
		.remark{
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 27rpx 0;
			text-align: center;
			font-size: calc(20rpx * var(--font-size-scale));
			color: #676767;
		}
	}
	.comment{
		background-color: #fff;
		.item{
			padding: 32rpx 0 20rpx;
			border-bottom: 2rpx solid #E3E3E3;
		}
		.user-info{
			display: flex;
			align-items: center;
			padding: 0 18rpx;
			margin-bottom: 28rpx;
		}
		.user-img{
			flex-shrink: 0;
			width: 48rpx;
			height: 48rpx;
			margin-right: 10rpx;
			border-radius: 50%;
			.img{
				width: 100%;
				height: 100%;
			}
		}
		.name-date{
			flex: 1;
			overflow: hidden;
			.name{
				font-size: calc(24rpx * var(--font-size-scale));
				color: #536DAF;
			}
			.date{
				font-size: calc(18rpx * var(--font-size-scale));
				color: #676767;
			}
		}
		.text{
			padding: 0 36rpx 0 76rpx;
			margin-bottom: 20rpx;
			line-height: 1.56;
			color: #333;
			font-size: calc(28rpx * var(--font-size-scale));
		}
		.approval{
			display: flex;
			justify-content: flex-end;
			padding-right: 42rpx;
			font-size: calc(20rpx * var(--font-size-scale));
			color: #999;
		}
		.ex,.dis{
			padding: 12rpx 24rpx;
		}
		.ex{
			// margin-right: 48rpx;
		}
		.on{
			color: #FCBE6F;
		}
	}
	.bottom-tab{
		&,.bottom-fixed{
			height: 126rpx;
		}
		.bottom-fixed{
			display: flex;
			align-items: center;
			justify-content: space-between;
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			z-index: 111;
			padding: 30rpx 44rpx 30rpx 32rpx;
			background-color: #fff;
			border-top: 2rpx solid #E3E3E3;
		}
		.left{
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 372rpx;
			height: 68rpx;
			padding: 0 40rpx 0 20rpx;
			font-size: 26rpx;
			color: #515151;
			border-radius: 34rpx;
			background-color: #F5F5F5;
			.iconfont{
				display: flex;
				align-items: center;
				font-size: 34rpx;
			}
		}
		.l{
			display: flex;
			.iconfont{
				margin-right: 12rpx;
			}
		}
		.r{
			position: relative;
			&::after{
				content: "";
				position: absolute;
				top: 50%;
				left: -25rpx;
				width: 2rpx;
				height: 20rpx;
				margin-top: -10rpx;
				background-color: #EBEBEB;
			}
		}
		.right{
			display: flex;
			text-align: center;
			font-size: 20rpx;
			color: #666;
			.iconfont{
				margin-bottom: 4rpx;
				font-size: 40rpx;
			}
			.item{
				width: 66rpx;
				margin-right: 32rpx;
				&:last-child{
					margin-right: 0;
				}
				&.on{
					.iconfont{
						color: #FCBE6F;
					}
				}
			}
		}
	}
	.center-btn{
		margin-top: 60rpx;
		.btn{
			display: flex;
			justify-content: center;
			align-items: center;
			width: 250rpx;
			height: 86rpx;
			padding: 0;
			font-size: 34rpx;
			background-color: #fff;
			border-radius: 44rpx;
			border: 2rpx solid #FCBE6F;
			color: #FCBE6F;
			&::after{
				display: none;
			}
			&[disabled]{
				color: rgba(0, 0, 0, 0.3);
				background-color: #f7f7f7;
				border: none;
			}
		}
	}
	.titleA3A4{
		padding: 0 36rpx 28rpx;
		margin: 0 -36rpx 36rpx;
		box-shadow: 0rpx 14rpx 14rpx 2rpx rgba(0,0,0,0.03);
		font-size: 30rpx;
		color: #252525;
		line-height: 44rpx;
		.label{
			font-weight: bold;
		}
	}
	.ex-edit{
		display: flex;
		justify-content: flex-end;
		margin: 20rpx 0;
		.btn{
			display: flex;
			justify-content: center;
			align-items: center;
			width: 112rpx;
			height: 36rpx;
			font-size: 20rpx;
			color: #222;
			border-radius: 18rpx;
			border: 1rpx solid #707070;
		}
	}
</style>
